<template>
  <view class="item_cell" :style="getCellStyle" :hover-class="hover">
    <view class="label" :style="getLabelStyle">
      <slot name="label">
        {{ label }}
      </slot>
    </view>
    <view class="lf-wrap">
      <view class="value" :style="getVaueStyle">
        <slot name="value">
          {{ value }}
        </slot>
      </view>
      <slot name="icon">
        <view v-if="showIcon" class="icon">
          <mui-icons :type="icon" :color="iconColor" :size="iconSize" />
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
const defaultCellStyle = {
  padding: '20rpx 20rpx',
  fontSize: '28rpx',
  color: '#333'
}

const defaultLabelStyle = {
  // color: '#333'
}

const defaultValueStyle = {
  // color: '#333'
}

export default {
  props: {
    hover: {
      type: String,
      default: 'mui-cell-hover',
      validator(val) {
        return ['mui-cell-hover', 'none'].includes(val)
      }
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    /* 是否显示右侧icon 例如箭头 */
    showIcon: {
      type: Boolean,
      default: true
    },
    /* icon 图标名称 */
    icon: {
      type: String,
      default: 'forward'
    },
    iconSize: {
      type: [Number, String],
      default: 20
    },
    iconColor: {
      type: String,
      default: defaultCellStyle.color
    },
    /* cell 整体样式 */
    cellStyle: {
      type: Object,
      default: () => {
        return defaultCellStyle
      }
    },
    labelStyle: {
      type: Object,
      default: () => {
        return defaultLabelStyle
      }
    },
    valueStyle: {
      type: Object,
      default: () => {
        return defaultValueStyle
      }
    }
  },
  computed: {
    getCellStyle() {
      return Object.assign(defaultCellStyle, this.cellStyle)
    },
    getLabelStyle() {
      return Object.assign(defaultLabelStyle, this.labelStyle)
    },
    getVaueStyle() {
      return Object.assign(defaultValueStyle, this.valueStyle)
    }
  }
}
</script>

<style>
.mui-cell-hover {
  background: rgba(100, 100, 100, 0.1);
  /* filter: brightness(90%); */
}
</style>

<style scoped lang="scss">
.item_cell {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .label {
    display: flex;
  }

  .lf-wrap {
    display: flex;
    align-items: center;
  }

  .icon {
    margin-left: 6rpx;
  }

  .value {
    display: flex;
  }
}
</style>
